{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link href="__ADMIN__/css/style.css" rel="stylesheet">
<style>
    .chat-container {
        height: 400px;
        border: 1px solid #e6e6e6;
        padding: 10px;
        overflow-y: auto;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .message {
        display: flex;
        margin-bottom: 10px;
        align-items: flex-start;
        background: #f9f9f9;
        border: none;
    }

    .message.me {
        justify-content: flex-end;
    }

    .message .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #ccc;
        text-align: center;
        line-height: 40px;
        font-weight: bold;
        color: white;
        margin-right: 10px;
    }

    .message.me .avatar {
        background-color: #1E9FFF;
        order: 2;
        margin-left: 10px;
        margin-right: 0;
    }

    .message .bubble {
        max-width: 70%;
        padding: 10px;
        background-color: #f2f2f2;
        border-radius: 10px;
    }

    .message.me .bubble {
        background-color: #1E9FFF;
        color: white;
    }

    .chat-input-container {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .chat-input-container textarea {
        resize: none;
        flex: 1;
        border: 1px solid #e6e6e6;
        outline: none;
        padding: 10px;
        height: auto;
        min-height: 40px;
        font-size: 14px;
        border-radius: 5px;
    }

    .send-button {
        margin-left: 10px;
        font-size: 14px;
    }

    .action-buttons {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .action-buttons button {
        margin: 0 10px;
        font-size: 14px;
    }
</style>{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">

                <div class="ibox-content">
                    <h3>AI训练说明</h3>
                    <p>1.AI训练主要目的是为了让AI为我们生成所需的标准答案，例如：<span style="color: red">[[2,1,1,3,2,1,2,1,2,1,2,1,1,1,2,2,1,3,2,2,[1,3,4,5],[1,2,4],[1,4,5],[1,3,5],[1,2,5],[1,2,3,4],[1,2,3,4],[2,3],"建议增加更多餐饮服务点", "在金顶看日出非常震撼"]]</span>
                    </p>
                    <p>2.当前输入框的内容<span style="color: red">只读</span></p>
                    <p>3.训练AI的步骤：【发送】，观察AI输出的数据是否和第1点中的示例数据相似，相似的话【更新AI答案】，否则【删除AI答案】</p>
                    <p>4.点击更新AI答案，如果网页并未弹出成功的提示，则说明AI给出的答案还未达到我们所需要的效果，继续第3点的步骤</p><br>

                    <div class="chat-container" id="chat-container"></div>

                    <div class="action-buttons">
                        <button class="layui-btn layui-btn-danger" id="del-answer-btn">删除AI答案</button>
                        <button class="layui-btn layui-btn-warm" id="update-answer-btn">更新AI答案</button>
                    </div>

                    <!-- 输入框和发送按钮 -->
                    <div class="chat-input-container">
                        <textarea class="layui-textarea" id="chat-input" rows="1" readonly placeholder="请向AI提出您的需求..." oninput="autoResize(this)">帮我生成一份答案</textarea>
                        <button class="layui-btn layui-btn-normal send-button" id="send-btn">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script>
    var list = {$list};
    if(list){
       list.forEach(val => {
           var {prompt, text} = val;
           appendMessage(prompt, 'me');
           appendMessage(text, 'ai');
       })
    }

    function appendMessage(content, sender) {
        const chatContainer = document.getElementById('chat-container');
        const messageDiv = document.createElement('div');
        messageDiv.classList.add('message');
        if (sender === 'me') {
            messageDiv.classList.add('me');
        }

        const avatar = document.createElement('div');
        avatar.classList.add('avatar');
        avatar.textContent = sender === 'me' ? 'ME' : 'AI';

        const bubble = document.createElement('div');
        bubble.classList.add('bubble');
        bubble.textContent = content;

        messageDiv.appendChild(avatar);
        messageDiv.appendChild(bubble);

        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight; // Auto scroll to bottom
    }

    $('#send-btn').click(function () {
        var question_id = `{:input('id')}`;
        var prompt = $('#chat-input').val();
        if (prompt) {
            appendMessage(prompt, 'me');
            $('#chat-input').val('帮我生成一份答案');

            $.post('/admin/manage/aiTrain', {question_id, prompt}, res => {
                if (res.result == 1) {
                    appendMessage(res.data.content, 'AI');
                } else {
                    layer.msg(res.msg);
                }
            }, 'JSON')
        } else {
            layer.msg('请向AI提出您的需求...');
        }
    })

    $('#del-answer-btn').click(function (){
        var question_id = `{:input('id')}`;
        var type = 1;
        $.post('/admin/manage/aiTrain', {question_id, type}, res => {
            if (res.result == 1) {
                // 成功提示
                layer.msg(res.msg);
                setTimeout(() => {
                    window.location.reload();
                },500)
            } else {
                layer.msg(res.msg);
            }
        }, 'JSON')
    })

    $('#update-answer-btn').click(function (){
        var question_id = `{:input('id')}`;
        var type = 2;
        $.post('/admin/manage/aiTrain', {question_id, type}, res => {
            if (res.result == 1) {
                // 成功提示
                layer.msg(res.msg);
                setTimeout(() => {
                    window.location.href = "/admin/manage/questionList";
                },500)
            } else {
                layer.msg(res.msg);
                setTimeout(() => {
                    window.location.reload();
                },500)
            }
        }, 'JSON')
    })

    function autoResize(textarea) {
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + 'px';
    }

</script>{/block}
